<template>
    <van-card v-for="item in teamlist" :key="item.id" :price="item.buy_text" :thumb="item.product.thumbs_text">
        <template #title>
            <h3>{{ item.product.name }}</h3>
            <div> 人数： <span style="color: red;">{{ item.total }}</span>人 </div>
            <div> 拼团时间：{{ item.createtime }} (开始) ~ {{ item.endtime_text }} (结束)</div>
        </template>
        <template #footer>
            <van-button type="danger" size="small" @click=" getProductInfoData(item.product.id, item.id)">参与拼团</van-button>
            <van-button type="warning" size="small" @click="toInfoPages(item.id)">拼团详情</van-button>
        </template>
    </van-card>

    <!-- 商品SKU -->
    <van-sku v-model="SkuShow" ref="SkuRef" stepper-title="购买数量" :sku="sku" :goods="goods" :goods-id="proid"
        :properties="properties">
        <!-- 自定义 sku actions -->
        <template #sku-actions="">
            <div class="van-sku-actions">
                <van-button square size="large" type="danger" @click="teamJoin">
                    参与拼团
                </van-button>
            </div>
        </template>
    </van-sku>

    <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue';
import VanSku from 'vant-sku';
import 'vant-sku/dist/index.css'

const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})

// sku属性
const SkuRef = ref(null)
const SkuShow = ref(false)
const sku = ref({})
const goods = ref({})
const properties = ref([])
const detail = ref({})

const teamlist = ref([])
const currentTeamId = ref(0)
const currentProId = ref(0)

onBeforeMount(() => {
    getTeamData();
});

// 获取商品详情
const getProductInfoData = async (proid, teamid) => {
    SkuShow.value = true;
    let result = await Api.ProductInfo({
        proid: proid,
        busid: LoginUser.id ?? 0
    })
    
    currentProId.value = proid;
    currentTeamId.value = teamid;

    if (result.code == 1) {
        let ProductData = result.data.info
        let SkuData = result.data.sku
        let PropertiesData = result.data.properties

        detail.value = ProductData
        sku.value = SkuData
        properties.value = Object.values(PropertiesData)
        goods.value = {
            picture: detail.value.thumbs_text
        }
    }
}

// 获取拼团信息
const getTeamData = async () => {
    let result = await Api.TeamIndex()
    if (result.code == 1) {
        teamlist.value = result.data
    }
}

// 商品详情
const toPages = (proid) => {
    proxy.$router.push({ path: '/product/info', query: { proid: proid } })
}

// 拼单详情
const toInfoPages = (teamid) => {
    proxy.$router.push({ path: '/team/info', query: { teamid: teamid } })
}

// 参与拼团
const teamJoin = () =>
{
    SkuShow.value = false;

    if(JSON.stringify(LoginUser) == '{}') {
        toast({
            message: '未登陆，请先去登陆',
            onClose: () =>{
                proxy.$router.push('/business/login')
            }
        });

        return false;
    }

    // 通过 ref 可以获取到 Sku 实例并调用实例方法，详见组件实例方法。
    let SkuData = SkuRef.value.getSkuData()

    const selectedNum = SkuData.selectedNum

    if(selectedNum <= 0)
    {
        error('数量不能为小于0');
        return false
    }

    //判断是否有选择规格
    if(properties.value.length > 0 && !SkuData.selectedSkuComb)
    {
        error('请选择商品规格')
        return false;
    }

    let relationids = []

    if(properties.value.length > 0)
    {
        let  properties = SkuData.selectedSkuComb.properties
        properties.forEach((item) => {
            if(item.v)
            {
                var id = item.v[0] ? item.v[0].id : 0;
                relationids.push({
                    id: id,
                    name: item.v[0].name ?? '',
                    price: item.v[0].price,
                    teamid: currentTeamId.value,
                })
            }
        })
    }

    // 存储属性数据
    proxy.$cookies.set('relationids', JSON.stringify(relationids))

    //路由跳转
    proxy.$router.push({
        path: '/team/add',
        query:{
            proid: currentProId.value,
            nums: selectedNum,
            isJoin: 1
        }
    })
}
</script>
